<template>
    <div class="flyDuck-app-home-main-page">
        <el-card class="box-card" style="width: 400px">
            <div slot="header" class="clearfix">
                <span>{{personDetail.nickName}}</span>
            </div>
            <div>
                <div style="display: flex;justify-content: center">
                    <img title="点击修改用户头像" :src="personDetail.avatar" style="width: 100px;height: 100px;border-radius: 50px" alt="">
                </div>
                <div>用户名:<el-tag type="success">{{personDetail.userName}}</el-tag></div>
                <div>性别:<el-tag type="success" v-text="personDetail.sex == '1'? '男':'女'"></el-tag></div>
                <div>手机号码:<el-tag type="success">{{personDetail.phone}}</el-tag></div>
                <div>邮箱:<el-tag type="success">{{personDetail.email}}</el-tag></div>
                <div style="display: flex;justify-content: space-around;margin-top: 10px">
                    <el-button type="primary" @click="openUpdatePersonDialog">修改信息</el-button>
                    <el-button type="primary" @click="openUpdateAvatarDialog">修改头像</el-button>
                    <el-button type="danger" @click="openUpdatePasswordDialog">修改密码</el-button>
                </div>
            </div>
        </el-card>
        <el-dialog title="编辑用户信息" :visible.sync="updatePersonDialogVisible" width="30%">
            <div>
                <el-form ref="personForm" :model="updatePersonForm" label-width="80px">
                    <el-form-item label="昵称">
                        <el-input v-model="updatePersonForm.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="updatePersonForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="updatePersonForm.email"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updatePersonDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePerson">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改头像" :visible.sync="updateAvatarDialogVisible" width="30%">
            <div>
                <el-form :model="updateAvatarForm" status-icon :rules="updateAvatarRules" ref="updateAvatarForm" label-width="100px">
                    <el-form-item label="头像" prop="avatar">
                        <SingleUpload v-model="updateAvatarForm.avatar"></SingleUpload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateAvatarDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAvatar">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改密码" :visible.sync="updatePasswordDialogVisible" width="30%">
            <div>
                <el-form :model="updatePasswordForm" status-icon :rules="updatePasswordRules" ref="updatePasswordForm" label-width="100px">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input type="password" v-model="updatePasswordForm.oldPassword" placeholder="请输入旧密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input type="password" v-model="updatePasswordForm.newPassword" placeholder="请输入新密码" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="updatePasswordForm.checkPassword" placeholder="请确认新密码" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePassword">确认</el-button>
                        <el-button @click="resetForm('updatePasswordForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import {getUserCenterDetail,updateUserCenter,updatePassword,updateAvatar} from "@/api/userCenter";
    import SingleUpload from '@/components/upload/singleUpload'
    import {logout} from "@/api/login";

    export default {
        name: "UserCenter",
        components:{Treeselect ,SingleUpload},
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.updatePasswordForm.checkPassword !== '') {
                        this.$refs.updatePasswordForm.validateField('checkPassword');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                debugger
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.updatePasswordForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                personDetail:{
                    id:'',
                    nickName:'',
                    userName:'',
                    phone:'',
                    email:'',
                    sex:'',
                    deptId:'',
                    avatar:''
                },
                //修改用户信息弹窗
                updatePersonDialogVisible:false,
                updatePersonForm:{
                    id:'',
                    nickName:'',
                    userName:'',
                    phone:'',
                    email:''
                },
                //修改用户密码弹窗
                updatePasswordDialogVisible:false,
                updatePasswordForm: {
                    oldPassword: '',
                    newPassword: '',
                    checkPassword: ''
                },
                updatePasswordRules: {
                    oldPassword:[
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    newPassword: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPassword: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
                //修改用户头像
                updateAvatarDialogVisible:false,
                updateAvatarForm: {

                },
                updateAvatarRules:{
                    avatar:[
                        {required:true, message:'请选择头像', trigger:'blur'}
                    ]
                }

            };
        },
        mounted() {
          this.getUserInfo();
        },
        methods: {
            getUserInfo(){
                getUserCenterDetail().then(data => {
                    if (data) {
                        this.personDetail = data
                    }
                })
            },
            openUpdatePersonDialog(){
                this.updatePersonDialogVisible = true;
                getUserCenterDetail().then(data => {
                    if (data) {
                        this.updatePersonForm = data
                    }
                })
            },
            updatePerson(){
                updateUserCenter(this.updatePersonForm).then(data => {
                    if (data) {
                        this.getUserInfo();
                        this.updatePersonDialogVisible = false;
                    }
                })
            },
            openUpdatePasswordDialog(){
                this.updatePasswordDialogVisible = true;
            },
            updatePassword() {
                this.$refs.updatePasswordForm.validate((valid) => {
                    if (valid) {
                        updatePassword(this.updatePasswordForm).then(data => {
                            if(data){
                                // 注销登录
                                logout();
                                //清空用户信息
                                window.sessionStorage.removeItem('token');
                                window.sessionStorage.removeItem('loginInfo');
                                // 清空菜单
                                this.$store.commit('initRoutes',[]);
                                //跳转登录
                                this.$router.replace('/');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            openUpdateAvatarDialog(){
              this.updateAvatarDialogVisible = true;
            },

            updateAvatar(){
                this.$refs.updateAvatarForm.validate((valid) => {
                    if (valid) {
                        updateAvatar(this.updateAvatarForm).then(data => {
                            if (data) {
                                this.getUserInfo();
                                this.updateAvatarDialogVisible = false;
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },

        },
    }
</script>
<style>
</style>

